<script setup lang="ts">
import useTableLists from './composable'
import { Edit, Delete, Download, Upload } from '@element-plus/icons-vue'
import OperateModal from './components/OperateModal/index.vue'
import type { EmissionFactorBody } from '@/api/modules/emissionFactors'

const tableListsRef = ref<any>()
const inputRef = ref<HTMLInputElement>()
const operateModalRef = ref<InstanceType<typeof OperateModal>>()
const energyName = ref('')
const startTime = ref('')
const {
  tableData,
  loading,
  columns,
  pagination,
  queryList,
  del,
} = useTableLists()
const info = ref<Partial<EmissionFactorBody>>({})

async function clickSearch() {
  pagination.pageNumber = 1
  await nextTick()
  await queryList({
    energyName: energyName.value,
    startTime: startTime.value,
  })
}
async function clickAdd() {
  info.value = {}
  await nextTick()
  operateModalRef.value?.open()
}
async function clickRowEdit(row: EmissionFactorBody) {
  info.value = { ...row, emissionFactors: +row.emissionFactors }
  await nextTick()
  operateModalRef.value?.open()
}
async function clickRowDelete(row: EmissionFactorBody) {
  if (row.id) {
    await del([row.id])
    await nextTick()
    clickSearch()
  }
}

async function clickBatchDelete() {
  const selections = tableListsRef.value?.tableOnMethod?.('getSelectionRows')
  if (!selections.length) {
    ElMessage.warning('请选择要删除的数据')
    return
  }
  await del(selections.map((item: any) => item.id))
  await nextTick()
  clickSearch()
}

async function clickDownload() {
  await carbonEmissionFactorApi.downloadTemplate()
}
async function clickUpload(evt: Event) {
  const target = evt.target as HTMLInputElement
  const file = target.files?.[0]
  if (file) {
    try {
      await carbonEmissionFactorApi.importExcel(file)
      ElMessage.success('导入成功')
      clickSearch()
    }
    catch (e) {}
    finally {
      if (inputRef.value) {
        inputRef.value.value = ''
      }
    }
  }
}

onMounted(() => {
  clickSearch()
})
</script>

<template>
  <div class="padding-sm flex flex-col container">
    <TableLists
      ref="tableListsRef"
      :lists="tableData" :loading="loading"
      :columns="columns" :show-toolbox="false"
      :operate-width="140" row-key="id"
    >
      <template #actions>
        <div class="w-full flex items-center">
          <span class="fs-14 mr-3">能源品种</span>
          <ElInput v-model="energyName" class="w-40" placeholder="模糊搜索" clearable />
          <span class="fs-14 mx-3">起始日期</span>
          <ElDatePicker
            v-model="startTime"
            class="w-40"
            type="date"
            placeholder="起始日期"
            value-format="YYYY-MM-DD"
            clearable
          />
          <SearchButton class="ml-3" @click="clickSearch" />
          <AddButton @click="clickAdd" />
          <ElButton :icon="Download" type="primary" @click="clickDownload">
            模板下载
          </ElButton>
          <ElButton class="position-relative" :icon="Upload" type="primary">
            导入文件
            <input ref="inputRef" class="position-absolute inset-0 opacity-0" type="file" accept=".xlsx,.xls" @change="clickUpload">
          </ElButton>
          <ElButton :icon="Delete" type="danger" @click="clickBatchDelete">
            批量删除
          </ElButton>
        </div>
      </template>
      <template #operate="{ row }">
        <TdButton title="编辑" :icon="Edit" type="warning" @click="clickRowEdit(row)" />
        <TdButton title="删除" :icon="Delete" type="danger" @click="clickRowDelete(row)" />
      </template>
    </TableLists>
    <ListsPagination
      v-model:page-num="pagination.pageNumber"
      v-model:page-size="pagination.pageSize"
      :total="pagination.total"
      @change="queryList"
    />

    <!-- 碳排放因子信息 -->
    <OperateModal ref="operateModalRef" v-model="info" @save-success="clickSearch" />
  </div>
</template>
